<template>
  <div class="contentwarp">
    <el-row class="tableToolsbar">
      <el-col :span="24">
        <el-button type="primary" @click='dialogAddTast=true'>增加重点监控人</el-button>
        <el-dialog title="增加重点监控人" :visible.sync="dialogAddTast" width="500px" :append-to-body='true'>
          <div class="dialogAddTast">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="微信号" prop="wxNum">
                <el-input v-model="ruleForm.wxNum"></el-input>
              </el-form-item>
              <el-form-item label="备注" prop="desc">
                <el-input type="textarea" v-model="ruleForm.desc"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-dialog>
      </el-col>
    </el-row>
    <el-table :stripe="true" :data="deviceData" :border="true" style="width: 100%">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="wxNum" label="微信号" width="130"></el-table-column>
      <el-table-column prop="updated_at" label="创建时间" width="180"></el-table-column>
      <el-table-column prop="desc" label="设备备注"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="changeData" :page-size="dataSize" layout="total, prev, pager, next" :total="dataTotal"></el-pagination>
  </div>
</template>

<script>
  import { TMap } from '../../utils/tmap'
  import { mapGetters } from 'vuex'

  export default {
    data() {
      return {
        dataTotal: 0,
        currentPage: 1,
        dataSize: 10,
        deviceData: [
          {
            wxNum: "15532916223",
            updated_at: "2018-12-14 15:14:48",
            desc: "这人是一个医生"
          },
          {
            wxNum: "15875316223",
            updated_at: "2018-12-13 15:14:47",
            desc: "这人是一个好人"
          },
          {
            wxNum: "15532913563",
            updated_at: "2018-12-12 15:14:47",
            desc: "这人是一个渔民"
          },
          {
            wxNum: "15512486223",
            updated_at: "2018-12-11 15:14:48",
            desc: "这人是一个学生"
          },
        ],
        dialogAddTast: false,
        ruleForm: {
          wxNum: '',
          desc: ''
        },
        rules: {
          wxNum: [
            { required: true, message: '请输入微信号', trigger: 'blur' },
          ],
          desc: [
            { required: true, message: '请填写备注', trigger: 'blur' }
          ]
        }
      }
    },
    computed: {
      ...mapGetters([
        'GetQQMapKey'
      ])
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.dialogAddTast = false;
            this.$message({
              message: '添加成功',
              type: 'success'
            });
          } else {
            this.$message({
              message: '请填写信息',
              type: 'warning'
            });
            return false;
          }
        });
      },
      loadData: function (page) {
        let that = this
        this.$axios.get(this.APIURL + '/device', { params: { page: page } }).then(function (data) {
          if (data !== false) {
            //that.deviceData = data.data
            that.dataTotal = data.total
          }
        })
      },
      changeData: function (page) {
        this.currentPage = page
        this.loadData(page)
      },
    },
    mounted: function () {
      this.loadData()
    }
  }
</script>

<style scoped>
  .tableToolsbar {
    margin-bottom: 10px;
  }

  .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }

  .dialogAddTast {
    display: flex;
  }

  .dialogAddTast .left,
  .dialogAddTast .right {
    width: 50%;
  }

  .dialogAddTast .left {
    padding-right: 5px;
  }

  .dialogAddTast .right {
    padding-left: 5px;
  }

  .dialogAddTast .right .label,
  .dialogAddTast .left .label {
    border-left: 2px #409EFF solid;
    padding-left: 5px;
    box-sizing: border-box;
  }

  .dialogAddTast .right .device {
    min-height: 30%
  }

  .dialogAddTast .left span,
  .dialogAddTast .right span {
    margin-right: 10px;
    margin-top: 10px;
  }

  .peopleInfo {
    width: 250px;
    height: 90%;
    position: absolute;
    top: 75px;
    left: 20px;
  }

  .peopleInfo ul {
    padding: 0;
    height: 45%;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
  }

  .peopleInfo ul li {
    list-style: none;
    height: 40px;
    border-bottom: 1px solid #eeeeee;
    font-size: 14px;
    margin-bottom: 5px;
    padding-bottom: 5px;
    display: flex;
    color: #fff;
  }

  .peopleInfo ul .item .address,
  .peopleInfo ul .item .wxNum {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 40px;
    padding: 0 5px 0 0;
    color: #fff;
    text-align: center;
  }

  .peopleInfo ul .item .updated_at {
    width: 100px;
    display: flex;
    color: #fff;
    justify-content: center;
    align-items: center;
  }
</style>